<!-- 走马灯组件 -->
<template>
    <el-carousel indicator-position="outside" style="width: 1160px; left: 20px;">
        <el-carousel-item v-for="(item,index) in carouselData" :key="index" style="height: 100%;">
            <img :src="item.courseCover" alt=item.courseName style="width: 100%; height: 100%;cursor: pointer;" @click="goBackcoudetails(item.courseId)"> 
        </el-carousel-item>
    </el-carousel>
</template>

<script>
import { ref, onMounted } from 'vue'
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from '../api/index';
import router from '@/router';

export default{
    setup(){
        const carouselData = ref([]); 

        //发起请求返回轮播图的数据
        onMounted(async () => {  
            try {  
                const response = await axios.get('/course/findCoursesCar');  
                if(response.code === 200){  
                    console.log(response.data);
                    carouselData.value = response.data;
                }  
            } catch (error) {  
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }  
        }); 
        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }
        return{
            goBackcoudetails,
            carouselData,
        };
    },
    
};

</script>
  
<style scoped>
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
  